<template>
	<view>
		 <view v-if="showPopup" class="uni-popup">
			<!-- 遮罩层结构 -->
			<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="maskClick && close(true)" />
				<!-- 弹窗主题利用插槽 -->
				<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="maskClick && close(true)">
					<view class="uni-popup__wrapper-box" @click.stop="clear">
						<view class="tip color-33 font32 flex justify-center align-center margin-t-30">{{titleText}}</view>
						<view class="customPop" v-if="!custom" :style="{height:height+'rpx'}">
							<view class="top flex justify-center align-center color-99" :style="{height:height-100+'rpx'}">{{title}}</view>
							<view class="uni-modal__ft">
								<view class="uni-modal__btn uni-modal__btn_default" @click="close">{{closeText}}</view>
								<view class="uni-modal__btn uni-modal__btn_primary" @click="ok">{{openText}}</view>
							</view>
						</view>
						<slot name="module" v-else/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			notice:{
				type:[Boolean],
				default:false
			},
			 // 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			type: {
				type: String,
				default: 'center'
			},
			// 是否开启自定义
			custom: {
				type: Boolean,
				default: false
			},
			maskClick: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: true
			},
			title:{
				type: String,
				default: '确定要退出登录么？'
			},
			closeText:{
				type: String,
				default: '取消'
			},
			openText:{
				type: String,
				default: '确定'
			},
			height:{
				type:[String,Number],
				default:"270"
			},
			titleText:{
				type: String,
				default: '温馨提示'
			}
			
		},
		watch: {
			show(newValue) {
				if (newValue) {
					this.open()
				} else {
					this.close()
				}
			}
		},
		data() {
			return {
				showPopup: false,
				ani: '' // 动画样式类名
				
			};
		},
		methods: {
		clear() {},
		open() {
			this.showPopup = true
			this.$nextTick(() => {
				setTimeout(() => {
					this.ani = 'uni-' + this.type
				}, 30)
			})
		},
		close(type) {
			if (!this.maskClick && type) return
			this.$emit('cancel')
			this.ani = ''
			this.showPopup = false
		},
		ok(){
			if (!this.maskClick && type) return
			this.$emit('confirm')
		}
	}
	}
</script>

<style lang="scss" scoped>
	 .uni-popup {
		position: fixed;
		top: 0;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		overflow: hidden
	}

	.uni-popup__mask {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background: rgba(0, 0, 0, .4);
		opacity: 0
	}

	.uni-popup__mask.ani {
		transition: all .3s
	}

	.uni-popup__mask.uni-bottom,
	.uni-popup__mask.uni-center,
	.uni-popup__mask.uni-top {
		opacity: 1
	}

	.uni-popup__wrapper {
		position: absolute;
		z-index: 999;
		box-sizing: border-box
	}

	.uni-popup__wrapper.ani {
		transition: all .3s
	}

	.uni-popup__wrapper.top {
		top: 0;
		left: 0;
		width: 100%;
		transform: translateY(-100%)
	}

	.uni-popup__wrapper.bottom {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateY(100%)
	}

	.uni-popup__wrapper.center {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: scale(1.2);
		opacity: 0
	}
	.uni-modal__btn_primary{
		color: rgb(0, 122, 255) !important;
	}
	.uni-popup__wrapper-box {
		position: relative;
		box-sizing: border-box;
		.customPop{
			width:600rpx;
			background-color: #fff;
			border-radius: 10rpx;
			text-align: center;//padding-top:20rpx;
			.top{
			}
			.uni-modal__ft{
				position: relative;
				line-height: 100rpx;
				font-size: 36rpx;
				display: flex;
				&::after{
					content: " ";
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					height: 2rpx;
					border-top: 2rpx solid #d5d5d6;
					color: #d5d5d6;
					transform-origin: 0 0;
					transform: scaleY(.5);
				}
				.uni-modal__btn{
					display: block;
					flex: 1;
					color: rgb(0, 0, 0);
					text-decoration: none;
					position: relative;
					cursor: pointer;
					&::after{
						content: " ";
						position: absolute;
						left: 0;
						top: 0;
						width: 2rpx;
						bottom: 0;
						border-left: 2rpx solid #d5d5d6;
						color: #d5d5d6;
						
						transform-origin: 0 0;
						
						transform: scaleX(.5);
					}
				}
			}
		}
	}

	.uni-popup__wrapper-box {
		//padding: 30upx;
		background: #fff
	}

	.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
		position: relative;
		max-width: 80%;
		max-height: 80%;
		overflow-y: scroll
	}

	.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,
	.uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
		width: 100%;
		max-height: 500px;
		overflow-y: scroll
	}

	.uni-popup__wrapper.uni-bottom,
	.uni-popup__wrapper.uni-top {
		transform: translateY(0)
	}

	.uni-popup__wrapper.uni-center {
		transform: scale(1);
		opacity: 1
	}
</style>
